<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>添加用户</title>

    <!-- Bootstrap core CSS -->
    <link href="../res/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../res/css/navbar-fixed-top.css" rel="stylesheet">
    <link rel="stylesheet" href="../res/css/common.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toastr.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toast.custom.css">
    <link rel="stylesheet" href="../res/plugins/bootbox/css/bootbox-custom.css">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>

    <![endif]-->


    <link rel="stylesheet" href="../res/plugins/select2/css/select2.css">
    <link rel="stylesheet" href="../res/css/themes/blue.css">
    <link rel="stylesheet" href="../res/plugins/Validform/css/Validform.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toastr.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toast.custom.css">
    <link rel="stylesheet" href="../res/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../res/plugins/jquery.uploadify/uploadify.css">

    <style>
		.form-group label.required{
			color:red;
		}

    </style>

</head>

<body>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="../res">Fixed top <span class="sr-only">(current)</span></a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">

    <ol class="breadcrumb">
        <li><a href="#">主页</a></li>
        <li><a href="#">用户管理</a></li>
        <li class="active">添加用户</li>
    </ol>

    <div class="panel panel-info">
        <div class="panel-heading" style="padding: 6px 15px;">
            <div class="row">
                <div class="col-xs-6" style="line-height: 30px;">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加员工
                </div>
            </div>
        </div>
        <div class="panel-body">

            <div class="form-wrap" style="padding:10px 0px;">

                <form id="addUserForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="account" class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-5">
                            <input id="account" name="account" type="text" class="form-control" placeholder="请输入账号"  datatype="s6-18" nullmsg="请输入账号！" errormsg="昵称至少6个字符,最多18个字符！"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div> 
                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label Validform_label required">昵称</label>
                        <div class="col-sm-5">
                            <input id="name" name="name" type="text" class="form-control" placeholder="请输入昵称"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-3 control-label Validform_label">密码</label>
                        <div class="col-sm-5">
                            <input id="password" name="password" type="password" class="form-control"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="repassword" class="col-sm-3 control-label Validform_label">确认密码</label>
                        <div class="col-sm-5">
                            <input id="repassword" type="password" class="form-control" placeholder="请输入确认密码"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>



                    <div class="form-group">
                        <label for="birthday" class="col-sm-3 control-label ">年月日</label>
                        <div class="col-sm-5">
                            <input id="birthday" type="text" name="birthday" class="form-control form_date" placeholder="请选择"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>

                    <div class="form-group">
                        <label for="ymdhm" class="col-sm-3 control-label ">年月日时分</label>
                        <div class="col-sm-5">
                            <input id="ymdhm" type="text" name="ymdhm" class="form-control form_datetime" placeholder="请选择" readonly/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>



                    <div class="form-group">
                        <label for="gender" class="col-sm-3 control-label">性别</label>
                        <div class="col-sm-5">
                            <label class="radio-inline">
                                <input id="gender" name="gender" type="radio" value="1" checked/> 男
                            </label>
                            <label class="radio-inline">
                                <input name="gender" type="radio" value="2"/> 女
                            </label>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="hobby" class="col-sm-3 control-label">爱好</label>
                        <div class="col-sm-5">
                            <div name="hobby">
                                <label class="checkbox-inline">
                                    <input id="hobby" name="hobby" type="checkbox" value="1"/> 篮球
                                </label>
                                <label class="checkbox-inline">
                                    <input name="hobby" type="checkbox" value="2"/> 乒乓球
                                </label>
                                <label class="checkbox-inline">
                                    <input name="hobby" type="checkbox" value="3"/> 足球
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="face" class="col-sm-3 control-label">文件</label>
                        <div class="col-sm-5">
                            <input id="face" type="file"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="province" class="col-sm-3 control-label">省份</label>
                        <div class="col-sm-5">
                            <select id="province" name="province" class="form-control">
                                <option value="-1">--请选择省份--</option>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">广东</option>
                                <option value="4">四川</option>
                            </select>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label for="remark" class="col-sm-3 control-label">备注</label>
                        <div class="col-sm-5">
                            <textarea id="remark" name="remark" class="form-control" rows="4" ignore="ignore" datatype="s5-200"></textarea>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>







                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-success btn-submit"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                            <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 取消</button>
                        </div>
                    </div>
                </form>

            </div>

        </div>
    </div>
	
	<button id="submitJson" class="btn btn-success">submit json</button>
	<button id="submitJsonStr" class="btn btn-success">submit json str</button>

</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../res/plugins/jquery/jquery-2.2.0.min.js"></script>
<script src="../res/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../res/plugins/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
<script src="../res/plugins/select2/js/select2.full.js"></script>
<script src="../res/plugins/Validform/js/Validform_v5.3.2_min.js"></script>
<script src="../res/plugins/Validform/js/Validform_Datatype.js"></script>
<script src="../res/plugins/jquery-formToObject/jquery.formToObject.js"></script>
<script src="../res/js/user/addUser.js"></script>
<script src="../res/plugins/toastr/js/toastr.js"></script>
<script src="../res/plugins/bootbox/js/bootbox.js"></script>
<script src="../res/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="../res/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../res/plugins/jquery.uploadify/jquery.uploadify.js"></script>

<script>
    $(".form_date").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:2,
        autoclose: true
    });
    $(".form_datetime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true
    });

    
    var uploadDataArray = [];
    
    $("#face").uploadify({
        auto : false,
        swf           : '../res/plugins/jquery.uploadify/uploadify.swf',
        uploader      : '../upload/uploadImage',
        fileObjName : 'file_data',
        width         : 120,
        height        : 30,
        multi : true,
        simUploadLimit : 999,
        buttonText : "选择文件",
        fileTypeDesc : 'Image Files',
        fileTypeExts : '*.jpg; *.png',
        onUploadSuccess : function(file, data, response) {
            console.log("onUploadSuccess");
            console.log(file);
            console.log(data);
            console.log(response);
            data = JSON.parse(data);
            console.log(data);
            if(data.success){
            	uploadDataArray.push(data.data);
            }
        },
        onQueueComplete : function(queueData) {
            console.log("onQueueComplete");
            console.log(queueData);
            console.log("uploadDataArray....");
            console.log(uploadDataArray);
        }
    });

    
    function submitForm(imagesArray){
    	// var param = $("#addUserForm").formToObject();	// 获取到表单参数对象
    	var param = {
    		id : 1,
    		name : "testJsonAdd",
    		addresses : [{
    			id : 100,
    			url : "address1111"
    		},{
    			id : 101,
    			url : "address222"
    		}],
    		images : [{
    			id : 200,
    			url : "images11111",
    			name : "A"
    		},{
    			id : 201,
    			url : "images222",
    			name : "B"
    		}]
    	};
    	console.log("param");
    	console.log(param);
    	var jsonParam = JSON.stringify(param);
    	console.log("jsonParam");
    	console.log(jsonParam);
    	$.ajax({
    		type : "POST",
    		url : "../upload/test",
    		data : jsonParam,
    		contentType : "application/json",
    		dataType : "json",
    		success : function(data, status, xhr){
    			console.log("ajax success:");
    			console.log(data);
    		},
    		error : function(xhr, status, ex){
    			console.log("ajax error:");
    			console.log(ex);
    		}
    	});
    	
    	
    }
    
    
    
    $("#submitJson").click(function(){
    	submitForm();
    });
    
    $("#submitJsonStr").click(function(){
    	var param = {
       		id : 1,
       		name : "testJsonAdd",
       		addresses : [{
       			id : 100,
       			url : "address1111"
       		},{
       			id : 101,
       			url : "address222"
       		}],
       		images : [{
       			id : 200,
       			url : "images11111",
       			name : "A"
       		},{
       			id : 201,
       			url : "images222",
       			name : "B"
       		}]
       	};
       	console.log("param");
       	console.log(param);
       	var jsonParam = JSON.stringify(param);
       	console.log("jsonParam");
       	console.log(jsonParam);
    	$.ajax({
    		type : "POST",
    		url : "../upload/test1",
    		data : {formParam : jsonParam},
    		dataType : "json",
    		success : function(data, status, xhr){
    			console.log("ajax success:");
    			console.log(data);
    		},
    		error : function(xhr, status, ex){
    			console.log("ajax error:");
    			console.log(ex);
    		}
    	});
    });
    
</script>

</body>
</html>
